<template>
  <div class="container">
    <div class="topfont">格式转换工具</div>
    <div class="centered-content">
      <div>
        <i
          class="el-icon-setting"
          style="font-size: 24px; font-weight: 700; margin-right: 20px"
          @click="setting"></i>
      </div>
      <div>
        <!-- <i
          class="el-icon-user"
          style="font-size: 24px; font-weight: 700; margin-right: 30px"></i> -->
      </div>
    </div>
    <el-dialog title="设置" :visible.sync="dialogFormVisible" class="dg">
      <el-form :model="form">
        <el-form-item label="算子目录" :label-width="formLabelWidth">
          <el-input
              v-model="form.operatorPath"
              autocomplete="off"
              @blur="operatorPathBlur"></el-input>
        </el-form-item>
        <el-form-item label="规则文件目录" :label-width="formLabelWidth">
          <el-input
            v-model="form.rulePath"
            autocomplete="off"
            @blur="rulePathBlur"></el-input>
        </el-form-item>
        <el-form-item label="输出目录" :label-width="formLabelWidth">
          <el-input
            v-model="form.jarOut"
            autocomplete="off"
            @blur="outputPathBlur"></el-input>
        </el-form-item>

<!--        <el-form-item label="使用帮助1目录" :label-width="formLabelWidth">-->
<!--          <el-input-->
<!--            v-model="form.chm1Path"-->
<!--            autocomplete="off"-->
<!--            @blur="chm1PathBlur"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="使用帮助2目录" :label-width="formLabelWidth">-->
<!--          <el-input-->
<!--            v-model="form.chm2Path"-->
<!--            autocomplete="off"-->
<!--            @blur="chm2PathBlur"></el-input>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
        <!-- <el-button type="primary" @click="confirm">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        formLabelWidth: "120px",
        formWidth: "800px",
        form: {
          //规则文件目录
          rulePath: null,
          //程序生成目录
          jarOut: null,
          //算子目录
          operatorPath: null,
          //使用帮助1
          chm1Path: null,
          //使用帮助2
          chm2Path: null,
        },
        test11: null,
        test: {
          code: 1,
          data: [],
          msg: "date",
        },
      };
    },
    created() {},
    mounted() {},
    methods: {
      setting() {
        this.dialogFormVisible = true;
        // this.test1();
        this.init();
      },
      test1() {
        const result = this.test;
        // let res = JSON.parse(result);
        const data = result.data;
        console.log("🚀 ~ test1 ~ data:", data);
        const resultObject = {};
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          resultObject[item.key] = item.value;
        }
        console.log("🚀 ~ test1 ~ resultObject:", resultObject);
        this.form = resultObject;
      },

      init() {
        const result = window.iConfig.getAll();
        let res = JSON.parse(result);
        const arr = res.data;
        console.log("🚀 ~ test1 ~ data:", arr);
        const resultObject = {};
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          resultObject[item.key] = item.value;
        }
        this.form = resultObject;
        console.log("🚀 ~ init ~ resultObject:", resultObject);
        // this.test11 = arr;
      },
      //规则文件目录
      rulePathBlur() {
        let data = { key: "rulePath", value: this.form.rulePath };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },
      //程序生成目录
      outputPathBlur() {
        let data = { key: "jarOut", value: this.form.outputPath };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },
      //算子目录
      operatorPathBlur() {
        let data = { key: "operatorPath", value: this.form.operatorPath };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },
      //使用帮助1
      chm1PathBlur() {
        let data = { key: "chm1Path", value: this.form.chm1Path };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },
      //使用帮助2
      chm2PathBlur() {
        let data = { key: "chm2Path", value: this.form.chm2Path };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      },

      confirm() {
        // let data = {
        //   rule_path: this.form.rule_path,
        //   output_path: this.form.output_path,
        //   operator_path: this.form.operator_path,
        // };
        let data = { key: "operatorPath", value: this.form.rulePath };
        let dataJSON = JSON.stringify(data);
        console.log("🚀 ~ confirm ~ dataJSON:", dataJSON);
        let result = window.iConfig.updateConfig(dataJSON);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.dialogFormVisible = false;
      },
      close() {
        this.dialogFormVisible = false;
      },
    },
  };
</script>

<style>
  .el-header {
    padding: 0 !important;
  }
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .centered-content {
    display: flex;
    align-items: center;
  }
  .topfont {
    padding-left: 3vw;
    font-size: 1.5rem;
    font-weight: 600;
  }
</style>
